<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="aa" uri="/WEB-INF/tld/ajaxanywhere.tld" %>
<%@ taglib prefix="datapager" uri="/WEB-INF/tld/pageTag.tld" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>jsp</title>
    <script src="/webjars/jquery/3.5.1/jquery.js"></script>
    <script src="/aa.js"></script>

    <link href="/page.css" type="text/css" rel="stylesheet">
    <%--<link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/resources/css/dashboard.css" />--%>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>


</head>
<body>

<form id="userSaveForm">
    <table id="userTable" class="table">
        <tbody>
            <tr>
                <td>姓名</td>
                <td><input type="text" id="saveName" name="saveName"></td>
            </tr>
            <tr>
                <td>省:</td>
                <td>
                    <select id="saveProvince" name="saveProvince"
                            onchange="changeGetSaveCity(this.options[this.options.selectedIndex].value)">
                        <option value="">请选择</option>
                        <c:forEach var="p" items="${provinceList}">
                            <option value="${p.id}">${p.name}</option>
                        </c:forEach>
                    </select>
                </td>
            </tr>
            <tr>
                <td>市:</td>
                <td>
                    <aa:zone name="zoneSaveCity">
                        <select id="saveCity" name="saveCity"
                                onchange="changeGetSaveCounty(this.options[this.options.selectedIndex].value)">
                            <option value="">请选择</option>
                            <c:forEach var="city" items="${cityList}">
                                <option value="${city.id}">${city.name}</option>
                            </c:forEach>
                        </select>
                    </aa:zone>
                </td>
            </tr>
            <tr>
                <td>区/县:</td>
                <td>
                    <aa:zone name="zoneSaveCounty">

                        <select id="saveCounty" name="saveCounty">
                            <option value="">请选择</option>
                            <c:forEach var="county" items="${countyList}">
                                <option value="${county.id}">${county.name}</option>
                            </c:forEach>
                        </select>
                    </aa:zone>
                </td>
            </tr>
        </tbody>
    </table>
</form>
<div style="float:right;margin-right: 30px;">
    <button type="button" name="btQuery" class="btn btn-success" id="close" onclick="userClose()">取消</button>
    <button type="button" name="btQuery" class="btn btn-success" id="userSave" onclick="userSave()">保存</button>
</div>
</body>
<script type="text/javascript">

    function changeGetSaveCity(val) {
        ajaxAnywhere.getAJAX('/t/getSaveCityList/' + val, 'zoneSaveCity');
        const county = document.getElementById("county");
        if (null != county) {
            county.options.length = 1
        }

    }

    function changeGetSaveCounty(val) {
        ajaxAnywhere.getAJAX('/f/getSaveCountyList/' + val, 'zoneSaveCounty');
    }

</script>
<script src="/page.js"></script>
</html>
